<table class="table table-noborder table-compact">
  <tbody>
    <tr>
      <td class="left">总伤害</td>
      <td>
        <app-formatted-quantity
          [quantity]="design.totalDamage"
        ></app-formatted-quantity>
      </td>
      <td
        *ngIf="showDifference"
        [ngClass]="{
          'text-success': design.editable?.totalDamage.gt(design.totalDamage),
          'text-danger': design.editable?.totalDamage.lt(design.totalDamage)
        }"
      >
        <app-formatted-quantity
          [quantity]="design.editable.totalDamage"
        ></app-formatted-quantity>
      </td>
    </tr>

    <tr>
      <td class="left">总装甲</td>
      <td>
        <app-formatted-quantity
          [quantity]="design.totalArmor"
        ></app-formatted-quantity>
      </td>
      <td
        *ngIf="showDifference"
        [ngClass]="{
          'text-success': design.editable.totalArmor.gt(design.totalArmor),
          'text-danger': design.editable.totalArmor.lt(design.totalArmor)
        }"
      >
        <app-formatted-quantity
          [quantity]="design.editable.totalArmor"
        ></app-formatted-quantity>
      </td>
    </tr>

    <tr>
      <td class="left">总护盾</td>
      <td>
        <app-formatted-quantity
          [quantity]="design.totalShield"
        ></app-formatted-quantity>
      </td>
      <td
        *ngIf="showDifference"
        [ngClass]="{
          'text-success': design.editable.totalShield.gt(design.totalShield),
          'text-danger': design.editable.totalShield.lt(design.totalShield)
        }"
      >
        <app-formatted-quantity
          [quantity]="design.editable.totalShield"
        ></app-formatted-quantity>
      </td>
    </tr>

    <tr>
      <td class="left">护甲减少伤害</td>
      <td>
        <app-formatted-quantity
          [quantity]="design.totalArmorReduction"
        ></app-formatted-quantity>
      </td>
      <td
        *ngIf="showDifference"
        [ngClass]="{
          'text-success': design.editable.totalArmorReduction.gt(
            design.totalArmorReduction
          ),
          'text-danger': design.editable.totalArmorReduction.lt(
            design.totalArmorReduction
          )
        }"
      >
        <app-formatted-quantity
          [quantity]="design.editable.totalArmorReduction"
        ></app-formatted-quantity>
      </td>
    </tr>

    <tr>
      <td class="left">盾牌减少伤害</td>
      <td>
        <app-formatted-quantity
          [quantity]="design.totalShieldReduction"
        ></app-formatted-quantity>
      </td>
      <td
        *ngIf="showDifference"
        [ngClass]="{
          'text-success': design.editable.totalShieldReduction.gt(
            design.totalShieldReduction
          ),
          'text-danger': design.editable.totalShieldReduction.lt(
            design.totalShieldReduction
          )
        }"
      >
        <app-formatted-quantity
          [quantity]="design.editable.totalShieldReduction"
        ></app-formatted-quantity>
      </td>
    </tr>

    <tr>
      <td class="left">总能量</td>
      <td>
        <app-formatted-quantity
          [quantity]="design.totalEnergy"
        ></app-formatted-quantity>
      </td>
      <td *ngIf="showDifference">
        <app-formatted-quantity
          [quantity]="design.editable.totalEnergy"
          [ngClass]="{
            'text-success': design.editable.totalEnergy.gt(design.totalEnergy),
            'text-danger': design.editable.totalEnergy.lt(design.totalEnergy)
          }"
        ></app-formatted-quantity>
      </td>
    </tr>

    <tr>
      <td class="left">爆炸机率</td>
      <td>
        <app-formatted-quantity
          [quantity]="design.explosionChance"
        ></app-formatted-quantity>
      </td>
      <td *ngIf="showDifference">
        <app-formatted-quantity
          [quantity]="design.editable.explosionChance"
          [ngClass]="{
            'text-danger':
              design.editable.explosionChance > design.explosionChance,
            'text-success':
              design.editable.explosionChance < design.explosionChance
          }"
        ></app-formatted-quantity>
      </td>
    </tr>

    <tr>
      <td class="left">盾充能</td>
      <td>
        <app-formatted-quantity
          [quantity]="design.totalShieldCharger"
        ></app-formatted-quantity>
      </td>
      <td
        *ngIf="showDifference"
        [ngClass]="{
          'text-success': design.editable.totalShieldCharger.gt(
            design.totalShieldCharger
          ),
          'text-danger': design.editable.totalShieldCharger.lt(
            design.totalShieldCharger
          )
        }"
      >
        <app-formatted-quantity
          [quantity]="design.editable.totalShieldCharger"
        ></app-formatted-quantity>
      </td>
    </tr>

    <tr>
      <td class="left">装甲伤害</td>
      <td>
        <app-formatted-quantity
          [quantity]="design.armorDamage"
        ></app-formatted-quantity>
      </td>
      <td *ngIf="showDifference">
        <app-formatted-quantity
          [quantity]="design.editable.armorDamage"
          [ngClass]="{
            'text-success': design.editable.armorDamage.gt(design.armorDamage),
            'text-danger': design.editable.armorDamage.lt(design.armorDamage)
          }"
        ></app-formatted-quantity>
      </td>
    </tr>

    <tr>
      <td class="left">护盾伤害</td>
      <td>
        <app-formatted-quantity
          [quantity]="design.shieldDamage"
        ></app-formatted-quantity>
      </td>
      <td *ngIf="showDifference">
        <app-formatted-quantity
          [quantity]="design.editable.shieldDamage"
          [ngClass]="{
            'text-success': design.editable.shieldDamage.gt(
              design.shieldDamage
            ),
            'text-danger': design.editable.shieldDamage.lt(design.shieldDamage)
          }"
        ></app-formatted-quantity>
      </td>
    </tr>

    <tr>
      <td class="left">瓦 /秒</td>
      <td>
        <app-formatted-quantity
          [quantity]="design.totalTilePerSec"
        ></app-formatted-quantity>
      </td>
      <td *ngIf="showDifference">
        <app-formatted-quantity
          [quantity]="design.editable.totalTilePerSec"
          [ngClass]="{
            'text-success':
              design.editable.totalTilePerSec > design.totalTilePerSec,
            'text-danger':
              design.editable.totalTilePerSec < design.totalTilePerSec
          }"
        ></app-formatted-quantity>
      </td>
    </tr>

    <tr>
      <td class="left">价格</td>
      <td>
        <app-formatted-quantity
          [quantity]="design.price"
        ></app-formatted-quantity>
      </td>
      <td *ngIf="showDifference">
        <app-formatted-quantity
          [quantity]="design.editable.price"
          [ngClass]="{
            'text-success': design.editable.price.gt(design.price),
            'text-danger': design.editable.price.lt(design.price)
          }"
        ></app-formatted-quantity>
      </td>
    </tr>
  </tbody>
</table>
